<template>
	<z-nav-bar title="训练点评"></z-nav-bar>
	<view class="page-item">
		<view class="z-font-32 text-w">问题总结点评</view>
		<view class="item">
			<view class="uni-585C66">问题名称：{{ itemInfo.name }}</view>
			<view class="add-box flex_sbc">
				<!-- <input v-model="comment.question" type="text" placeholder="请输入要点" maxlength="20" /> -->
				<textarea v-model="comment.question" auto-height  placeholder="请输入要点" maxlength="500"></textarea>
				<view class="button" @click="addComment">确认添加</view>
			</view>
			<view
				v-for="(comment, index) in courseInfo.result[itemInfo.id].summaryComment"
				:key="comment"
				class="flex_sbc uni-mt-16"
			>
				<view class="flex_fsc">
					<view class="dot"></view>
					<view class="uni-585C66" style="word-wrap:break-word;word-break:break-all;">{{ comment }}</view>
				</view>
				<image :src="setting.oss_pub_domain + '/app-img/icon/icon_close.png'" class="icon-size-32" @click="delComment(index)"></image>
			</view>
		</view>
	</view>

	<view class="page-item uni-mt-32">
		<view class="z-font-32 text-w">方案要点</view>
		<view v-for="(scheme, index) in itemInfo.questionSchemeList || []" class="item">
			<view class="uni-585C66">方案名称：{{ scheme.name }}</view>
			<view class="add-box flex_sbc">
				<textarea v-model="comment['scheme' + index]" auto-height  placeholder="请输入要点" maxlength="500"></textarea>
				<view class="button" @click="addGist(scheme, index)">确认添加</view>
			</view>
			<view
				v-for="(comment, ci) in courseInfo.result[itemInfo.id].trainingPoints[scheme.id]"
				:key="comment"
				class="flex_sbc uni-mt-16"
			>
				<view class="flex_fsc">
					<view class="dot"></view>
					<view class="uni-585C66" style="word-wrap:break-word;word-break:break-all;">{{ comment }}</view>
				</view>
				<image :src="setting.oss_pub_domain + '/app-img/icon/icon_close.png'" class="icon-size-32" @click="delGist(scheme, index)"></image>
			</view>
		</view>
	</view>
	<bottom-box :buts="buts" @change="submit"></bottom-box>
</template>

<script setup>
import { editCoursePlan } from '@/api/player.js';
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';
const { proxy: that } = getCurrentInstance();

const courseInfo = reactive(uni.getStorageSync('edit-course')),
	playerInfo = uni.getStorageSync('player-info'),
	comment = reactive({}),
	questionIndex = ref(0),
	itemInfo = reactive({});
onLoad((opt) => {
	questionIndex.value = parseInt(opt.index || 0);
	Object.assign(itemInfo, courseInfo.relQuestionSchemeList[questionIndex.value]);
	console.log(itemInfo);
});

function addComment() {
	if (!comment.question) return;
	courseInfo.result[courseInfo.relQuestionSchemeList[questionIndex.value].id].summaryComment.push(comment.question);
	comment.question = '';
}

function delComment(index) {
	courseInfo.result[courseInfo.relQuestionSchemeList[questionIndex.value].id].summaryComment.splice(index, 1);
}

function addGist(item, index) {
	if (!comment['scheme' + index]) return;
	if (!courseInfo.result[courseInfo.relQuestionSchemeList[questionIndex.value].id].trainingPoints[item.id]) courseInfo.result[courseInfo.relQuestionSchemeList[questionIndex.value].id].trainingPoints[item.id] = []
	courseInfo.result[courseInfo.relQuestionSchemeList[questionIndex.value].id].trainingPoints[item.id].push(
		comment['scheme' + index]
	);
	comment['scheme' + index] = '';
}

function delGist(item, index) {
	courseInfo.result[courseInfo.relQuestionSchemeList[questionIndex.value].id].trainingPoints[item.id].splice(
		index,
		1
	);
}

const buts = [
	{
		label: '确定',
		bgColor: 'uni-color-main-bg'
	}
];

function submit() {
	editCoursePlan({ result: JSON.stringify(courseInfo.result), stuId: playerInfo.id, type: 0 }, courseInfo.id).then((res) => {
		uni.setStorageSync('edit-course', courseInfo);
		uni.navigateBack();
	});
}
</script>

<style lang="scss">
page {
	background: $uni-F5F5F5;
	box-sizing: border-box;
	padding: 32rpx;
}

.page-item {
	width: 100%;
	box-sizing: border-box;
	padding: 32rpx 24rpx 24rpx;
	background: $uni-white;
	border-radius: 24rpx;
}

.item {
	width: 100%;
	box-sizing: border-box;
	padding: 20rpx;
	background: $uni-F5F5F5;
	border-radius: 16rpx;
	margin-top: 16rpx;
	.dot {
		width: 12rpx;
		height: 12rpx;
		background: $uni-orange;
		border-radius: 6rpx;
		margin-right: 12rpx;
		flex-shrink: 0;
	}
}

.add-box {
	width: 100%;
	box-sizing: border-box;
	padding: 0 12rpx 0 24rpx;
	background: $uni-white;
	border-radius: 16rpx;
	margin-top: 24rpx;
	.button {
		width: 124rpx;
		height: 56rpx;
		background: $uni-text-color-main;
		border-radius: 16rpx;
		color: $uni-white;
		line-height: 56rpx;
		text-align: center;
		font-size: 24rpx;
		flex-shrink: 0;
	}
	textarea {
		box-sizing: border-box;
		padding: 16rpx 0;
	}
}
</style>
